<!--
 * @description: 
 * @Author: Islands
 * @Date: 2023-10-18 15:44:16
 * @LastEditTime: 2024-03-28 01:47:01
-->
<script lang="ts" setup>
import { PictureFilled } from "@element-plus/icons-vue";
defineProps({
  icon: { type: String, required: true },
  pointerStyle: { type: String, default: "default" },
  size: { type: [Number, String], default: "1em" },
});
</script>
<template>
  <svg
    class="svg"
    v-bind="$attrs"
    :class="pointerStyle"
    :width="size"
    :height="size"
    aria-hidden="true"
  >
    <!-- 字节图标 -->
    <use v-if="icon.startsWith('#') && icon!==null" :xlink:href="icon" />
    <!-- 阿里图标 -->
    <use v-if="icon.startsWith('#icon-') && icon!==null" :xlink:href="`#icon-` + icon" />
    <!-- else -->
    <use v-else xlink:href="#error-picture" />
  </svg>
</template>
<style lang="scss" scoped>
.svg {
  /* 此属性为更改svg颜色属性设置 */
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
  outline: none; //解决显示方框问题
  padding: 3px;
}

// 枚举鼠标指针样式
.default {
  cursor: default;
}

.pointer {
  cursor: pointer;
}
</style>
